<template>
  <div class="news">
    <div class="addbox">
      <el-button type="primary" @click="showcreatenews">增加新闻</el-button>
    </div>
    <div class="newsList" v-show="tohide">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" width="300">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="新闻标题" width="500">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>标题: {{ scope.row.title }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.title }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="addnewsbox" v-show="toshow">
      <div class="closebox" @click="hidecreatenews">x</div>
      <news-create></news-create>
    </div>
    <div class="updatenewsbox">
      <updatenews v-if="nid" :nid="nid"></updatenews>
    </div>
    
  </div>
</template>

<script>
import newsCreate from "../components/createnews.vue";
import updatenews from "../components/updatenews.vue";
import { getNewsList, deletenewsFunc, } from "../http/request";
export default {
  name: "news",
  components: {
    newsCreate,
    updatenews,
  },
  data() {
    return {
      toshow: false,
      tohide: true,
      tableData: [],
    //   传给子组件的id
        nid:"",
    };
  },
  methods: {
    showcreatenews() {
      this.toshow = true;
      this.tohide = false;
    },
    hidecreatenews() {
      this.toshow = false;
      this.tohide = true;
    },
    handleEdit(index, row) {
    //   console.log(index, row);
      this.nid = row.id;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deletenews(row.id);
      this.$router.go(0);
    },
    // 获取新闻列表信息
    async shownews() {
      await getNewsList("/news/List").then((data) => {
        // console.log(data.result);
        let mydata = data.result.map((element) => {
          return {
            time: element.time,
            title: element.title,
            text: element.text,
            id: element.id,
          };
        });
        this.tableData = mydata;
        // console.log(this.tableData);
      });
    },
    // 删除新闻的信息
    async deletenews(Id) {
      await deletenewsFunc("/news/deletenews", { id: Id }).then((data) => {
        console.log(data);
      });
    },

    
  },
  mounted() {
    this.shownews();
  },
};
</script>

<style lang="scss" scoped>
.addnewsbox {
  background-color: #fff;
  position: relative;
  .closebox {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }
}
.updatenewsbox {
  background-color: #fff;
  position: relative;
  .closebox {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
  }
}
</style>